<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工人管理系统 - 注册</title>

</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }

    body {
        background: linear-gradient(135deg, #3498db, #2c3e50);
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 20px;
    }

    .auth-container {
        width: 100%;
        max-width: 400px;
    }

    .auth-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        padding: 30px;
    }

    .logo {
        text-align: center;
        margin-bottom: 25px;
    }

    .logo i {
        font-size: 3rem;
        color: #3498db;
        margin-bottom: 10px;
    }

    .logo h1 {
        color: #2c3e50;
        font-size: 1.8rem;
    }

    .form-group {
        margin-bottom: 20px;
    }

    label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #2c3e50;
    }

    input {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        font-size: 1rem;
        transition: all 0.3s;
    }

    input:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }

    .btn {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 6px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .btn-primary {
        background: #3498db;
        color: white;
    }

    .btn-primary:hover {
        background: #2980b9;
    }

    .btn-success {
        background: #2ecc71;
        color: white;
    }

    .btn-success:hover {
        background: #27ae60;
    }

    .error-message {
        background: #f8d7da;
        color: #721c24;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 15px;
        text-align: center;
        display: none;
    }

    .auth-footer {
        text-align: center;
        margin-top: 20px;
        color: #7f8c8d;
    }

    .auth-footer a {
        color: #3498db;
        text-decoration: none;
        font-weight: 600;
    }

    .auth-footer a:hover {
        text-decoration: underline;
    }
</style>
<body>
<div class="auth-container">
    <div class="auth-card">
        <div class="logo">
            <i class="fas fa-hard-hat"></i>
            <h1>工人管理系统</h1>
        </div>

        <div class="error-message" id="errorMessage">
            <!-- 错误信息将在这里显示 -->
        </div>

        <form id="registerForm">
            <div class="form-group">
                <label for="username"><i class="fas fa-user"></i> 用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            </div>

            <div class="form-group">
                <label for="password"><i class="fas fa-lock"></i> 密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
            </div>

            <div class="form-group">
                <label for="confirmPassword"><i class="fas fa-lock"></i> 确认密码</label>
                <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
            </div>

            <button type="submit" class="btn btn-success">
                <i class="fas fa-user-plus"></i> 注册
            </button>
        </form>

        <div class="auth-footer">
            <p>已有账号？<a href="login.html">立即登录</a></p>
        </div>
    </div>
</div>

<script>
    document.getElementById('registerForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        const messageDiv = document.getElementById('errorMessage');

        try {
            // 验证密码是否一致
            if (password !== confirmPassword) {
                throw new Error('两次输入的密码不一致');
            }

            messageDiv.textContent = '注册中...';
            messageDiv.className = 'message info';

            const response = await fetch('/api/register', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password })
            });

            // 检查响应状态
            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.message || '注册失败');
            }

            const result = await response.json();

            if (result.success) {
                // 保存令牌
                localStorage.setItem('jwtToken', result.token);
                messageDiv.textContent = '注册成功，正在跳转...';
                messageDiv.className = 'message success';

                // 跳转到管理页面
                setTimeout(() => {
                    window.location.href = '/index.html';
                }, 1000);
            } else {
                throw new Error(result.message);
            }
        } catch (error) {
            messageDiv.textContent = '注册失败: ' + error.message;
            messageDiv.className = 'message error';
        }
    });
</script>
</body>
</html>